<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
    <title>我的采购订单</title>
    <link rel="stylesheet" href="../../../component/elementUI/index.css" />
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/free.css" />
    <style>
        body { background: #f5f7fa; }
        .page { padding: 0.24rem; }
        .card { background: #fff; border-radius: 0.12rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 0.24rem; padding: 0.24rem; }
        .card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 0.16rem; }
        .serial { font-weight: 600; color: #333; font-size: 0.28rem; }
        .meta { color:#666; font-size:0.24rem; }
        .meta span { margin-right: 0.24rem; }
        .footer { display:flex; justify-content:space-between; align-items:center; margin-top:0.16rem; }
        .empty { text-align:center; color:#999; padding: 0.6rem 0; }
    </style>
</head>
<body>
    <div id="app" class="page">
        <div v-if="loading" style="text-align:center; padding:0.4rem;">
            <i class="el-icon-loading" style="font-size:0.36rem;"></i>
        </div>

        <div v-if="!loading && tableData.length===0" class="empty">暂无采购订单</div>

        <div v-for="row in tableData" :key="row.Purchase_Order_SerialNumber" class="card" @click="toDetail(row)">
            <div class="card-header">
                <div class="serial">订单号：{{ row.Purchase_Order_SerialNumber }}</div>
                <el-tag :type="statusTagType(row)" size="small">{{ formatStatus(row) }}</el-tag>
            </div>
            <div class="meta">
                <span>企业：{{ row.Enterprise_Name || row.Supplier_Name || '-' }}</span>
                <span>数量：{{ row.Quantity || row.Purchase_Quantity || '-' }}</span>
                <span>金额：{{ row.Amount || row.Reality_Amount || row.Purchase_Amount || '-' }}</span>
            </div>
            <div class="footer meta">
                <span>联系人：{{ row.Contacts || row.Purchase_Contacts || '-' }}</span>
                <span>电话：{{ row.Phone || row.Purchase_Phone || '-' }}</span>
                <span>地址：{{ row.Address || row.Purchase_Address || '-' }}</span>
            </div>
        </div>
    </div>

    <script src="../../../utils/jquery.min.js"></script>
    <script src="../../../utils/vue.min.js"></script>
    <script src="../../../component/elementUI/index.js"></script>
    <script src="../../../utils/utils.js"></script>
    <script src="../../../utils/http.js"></script>
    <script src="./js/my-purchase_order.js"></script>
</body>
</html>